<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="author" content="ChongMing" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="360-fullscreen" content="true">
    <title>咨讯详情</title>
</head>
<link rel="stylesheet" href="../css/framework7.ios.min.css">
<link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="../css/my-app.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/swipeslider.css">
<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/my-app.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/swipeslider.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 5,
            spaceBetween: 0,
            freeMode: true,
            initialSlide :initialSlide
        });
    }
</script>
<!--banner-->
<script type="text/javascript">
    $(window).load(function() {
        $('#full_feature').swipeslider();
        $('#content_slider').swipeslider({
            transitionDuration: 600,
            autoPlayTimeout: 10000
        });
        $('.swipslider').css('padding-top','0');
    });
$(function(){
    publicurl = 'http://ekang.ren/'
    var uid = interface.getQueryString('uid');
    var page_size = 12;
    var page_index = 1;
    var category_id = interface.getQueryString('category_id');
//    顶部分类导航
    interface.nav();
//    咨询列表
    interface.informationlist(category_id,page_index,page_size);
//    轮播图
    interface.news_focus(category_id);
//    点击进入文章详情
    $('.problemlist').live('click',function(){
       var article_id = $(this).attr('data-article_id');
       location.href = 'information.html?article_id='+article_id;
    });
//    导航切换
    $('.dataer .swiper-wrapper .swiper-slide').live('click',function(){
        var category_id = $(this).attr('data-category_id');
        var index = $(this).index();
        location.href='informationlist.html?category_id='+category_id+'&initialSlide='+index;
    });
//        下拉刷新
    var myApp = new Framework7();
    var $$ = Dom7;
    var loading = false;
    $$('.infinite-scroll').on('infinite', function () {
        if (loading) return;
        loading = true;
        setTimeout(function () {
            // 重置加载flag
            loading = false;
            page_index++
            interface.informationlist(category_id,page_index,page_size);
        }, 500);
    });
});
//    informationlist
//    Interface
interface = {
    nav : function(){
        $.ajax({
            type : 'get',
            url : publicurl+'news/getCategoryList',
            dataType : 'jsonp',
            data : {},
            success : function(res) {
                console.log(res);
                var data = res.data;
                if(res.ret==0){
                    $.each(data,function(i,t){
                        $(".swiper-wrapper").append('<div data-category_id="'+ t.category_id+'" class="swiper-slide"><span>'+t.category_name+'</span></div>');
                    });
                    $(".swiper-wrapper").append('<div class="swiper-slide"><span></span></div>');
                    initialSlide = interface.getQueryString('initialSlide');
                    if(initialSlide){
                        $(".swiper-wrapper .swiper-slide").eq(initialSlide).children('span').addClass('hover');
                    }else{
                        initialSlide = 0;
                        $(".swiper-wrapper .swiper-slide").eq(0).find('span').addClass('hover');
                    }
                }else{
                    alert(res.msg);
                }
            }
        });
    },
    news_focus : function(category_id){
        $.ajax({
            type : 'get',
            url : publicurl+'news/index',
            dataType : 'jsonp',
            data : {category_id:category_id},
            success : function(res) {
                console.log(res);
                var data = res.data;
                if(res.ret==0){
                    $.each(data.news_focus,function(i,t){
                        $('#full_feature .sw-slides').append('<li class="sw-slide"><img src="'+ t.pic+'" alt="Redhead girl"><p>'+ t.title+'</p></li>');
                    });
                }else{
                    alert(res.msg);
                }
            }
        });
    },
    informationlist : function(category_id,page_index,page_size){
        $.ajax({
            type : 'get',
            url : publicurl+'news/index',
            dataType : 'jsonp',
            data : {category_id:category_id,page_index:page_index,page_size:page_size},
            success : function(res) {
                console.log(res);
                var data = res.data;
                if(res.ret==0){
                    if(data.news_list==''||data.news_list.length<page_size){
                        $('.infinite-scroll-preloader').html('<p style="  text-align: center;font-size: 3.5vw; margin-bottom: 5px;  color: #666;">暂无加载数据</p>');
                    }
                    $.each(data.news_list,function(i,t){
                        $('.problemlistwin').append('<div class="problemlist" data-article_id="'+ t.article_id+'"><div class="con"><div class="top"><img src="'+ t.pic+'" class="left"><div class="right"><p class="tit">'+ t.title+'</p><p class="word">'+ t.message+'</p></div></div><div class="bottom"><p class="time">'+ t.add_time+'</p><div class="right"><div class="like"><img src="images/icon_2.png"><p class="likenum">'+ t.votes+'</p></div><div class="comment"><img src="images/icon3.png"><p class="commentnum">'+ t.comments+'</p></div></div></div></div></div>')
                    });
                }else{
                    alert(res.msg);
                }
            }
        });
    },
    getQueryString : function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
}
</script>
<!---->
<style>
    .list-block>ul{
        position: static;
    }
    .list-block ul:after{
        display: none;
    }
    .infinite-scroll-preloader {
        /*margin-top:-100px;*/
        margin: 10px 0 20% 0;
        position: relative;
    }
    .infinite-scroll-preloader .preloader {
        width:5vw;
        height:5vw;
        margin-left: 37%;
    }
    .infinite-scroll-preloader .word{
        position: absolute;
        top:17%;
        left:45%;
        font-size: 3.5vw;
        color: #666;
    }
    .page{
        background: rgb(255, 255, 255);
        height: 109%;
    }
    .list-block>ul{
        background: rgb(255, 255, 255);
    }
    .pull-to-refresh-layer{
    }
    .page-content{
        margin-top: -50px;
        height: 100%;
    }
    .list-block ul:before{
        background: none;
    }
    .view, .views{
        position: fixed;
    }
    /*page样式*/
    .scrollnav{
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    .dataer{
        font-family: "微软雅黑";
        color: #fff;
        position: relative;
    }
    /*滑动导航*/
    .dataer .search{
        position: absolute;
        right: 0;
        top:0;
        background: #fff;
        height: 43px;
        width: 18%;
        z-index: 9999999999;
        box-shadow:-1px -1px 3px #ccc ;
    }
    .dataer .search img{
        width: 45%;
        display: block;
        margin: 10% auto;
    }
    .dataer .swiper-wrapper .swiper-slide{
        display: block;
        float: left;
        height: 43px;
        border-left: 1px solid #fff;
        line-height: 43px;
        text-align: center;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webik-box-sizing:border-box;
    }
    .dataer .swiper-wrapper .swiper-slide span{
        width: auto;
        color: #333;
        font-size: 15px;
        height: 41px;
        display: block;
        width: 40px;
        margin: auto;
    }
    .dataer .swiper-wrapper .swiper-slide span.hover{
        color: #44b181;
        border-bottom: 2px solid #63ae85;
    }
    .swiper-container {
        width: 100%;
        height: 43px;
        margin: 0 auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: .18rem;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    /*问题列表*/
    .problemlist{
        width: 100%;
        height: auto;
        overflow: hidden;
        border-bottom: 1px solid #e1e1e1;
    }
    .problemlist .con{
        width:94%;
        height:auto;
        overflow: hidden;
        margin: auto;
        padding: 10px 0 5px 0;
    }
    .problemlist .con .top{
        width:100%;
        height: auto;
        overflow: hidden;
    }
    .problemlist .con .top .left{
        width: 25vw;
        height: 19vw;
        border-radius: 5px;
        float: left;
    }
    .problemlist .con .top .right{
        width:70%;
        height: auto;
        overflow: hidden;
        float: left;
        margin-left: 10px;
    }
    .problemlist .con .top .right .tit{
        font-size: 4vw;
        color: #333;
        line-height: 5vw;
        margin-bottom: 1vw;
        white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;
    }
    .problemlist .con .top .right .word{
        font-size: 3.7vw;
        line-height: 7.5vw;
        color: #8e8e8e;
        height: 14vw;
        overflow: hidden;
    }
    .problemlist .con .bottom{
        margin-top: 10px;
        width: 100%;
        height:auto;
        overflow: hidden;
    }
    .problemlist .con .bottom .time{
        float: left;
        font-size: 13px;
        color: #999;
    }
    .problemlist .con .bottom .right{
        width: 140px;
        height: auto;
        overflow: hidden;
        float: right;
    }
    .problemlist .con .bottom .right .like{
        width: 70px;
        height: auto;
        overflow: hidden;
        float: left;
    }
    .problemlist .con .bottom .right .like img{
        width: 20px;
        height: 20px;
        float: left;
    }
    .problemlist .con .bottom .right .like .likenum{
        float: left;
        margin-left: 5px;
        font-size: 13px;
        line-height: 20px;
        color: #999;
    }
    .problemlist .con .bottom .right .comment{
        width: 70px;
        height: auto;
        overflow: hidden;
        float: left;
    }
    .problemlist .con .bottom .right .comment img{
        width: 20px;
        height: 20px;
        float: left;
    }
    .problemlist .con .bottom .right .comment .commentnum{
        float: left;
        margin-left: 5px;
        font-size: 13px;
        line-height: 20px;
        color: #999;
    }
</style>
<body style=" background: #fff; overflow: scroll;">

<div class="views">
    <div class="view view-main" data-page="home">
        <div class="pages navbar-through">
            <div data-page="home" class="page">
                <div class="page-content infinite-scroll">
                    <div class="list-block" style=" margin: 0">
                        <ul>
                            <li style=" margin-top: 6px;">
                                <div class="scrollnav">
                                    <div class="dataer">
                                        <!-- Swiper -->
                                        <div class="swiper-container swiper-container-horizontal swiper-container-free-mode">
                                            <div class="swiper-wrapper">

                                            </div>
                                        </div>
                                        <div class="search"><img src="images/sousuo.png"></div>
                                    </div>
                                    <div class="banner">
                                        <article class="container">
                                            <section>
                                                <figure id="full_feature" class="swipslider">
                                                    <ul class="sw-slides">

                                                    </ul>
                                                </figure>
                                            </section>
                                        </article>
                                    </div>
                                </div>
                                <!--加载刷新的列表-->
                                <div class="problemlistwin">

                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="infinite-scroll-preloader">
                        <div class="preloader"></div>
                        <div class="word">正在加载...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>